@prefix: ~"vue-bigdata-table";
@select-border-color: #3695FE;

@keyframes scroll-tip{
	0% {
		background: #fff;
	}
	50% {
		background: #d0e8ff;
	}
}

.@{prefix}{
    width: 100%;
    box-sizing: border-box;
    *{
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      color: #495060;
      font-size: 12px;
      font-weight: 400;
    }
    &-outer{
        width: 100%;
        height: 100%;
        overflow: auto;
        border: 1px solid #e9eaec;
        box-sizing: border-box;
        position: relative;
        .@{prefix}-header-wrapper{
            box-sizing: border-box;
            z-index: 70;
						&.header-wrapper-fixed{
							position: -webkit-sticky;
							position: sticky;
						}
            table{
                table-layout: fixed;
                height: 100%;
                tr th{
                    border-right: 1px solid #e9eaec;
                    border-bottom: 1px solid #e9eaec;
                    background: #fff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                    // &:last-child{
                    //     border-right: none;
                    // }
                    .@{prefix}-header-inside-wrapper{
                        box-sizing: border-box;
                        padding: 0 8px;
                    }
                }
            }
        }
    }

    &-fixed-header{
        position: -webkit-sticky;
        position: sticky;
        transform: translateX(0);
        left: 0;
        z-index: 110;
        transition: box-shadow .2s ease;
        &.box-shadow{
            box-shadow: 2px 0 6px -2px rgba(0,0,0,.2);
            transition: box-shadow .2s ease;
        }
    }

    &-wrapper{
        width: 100%;
        border-bottom: none;

        .@{prefix}-content{
            width: 100%;
            height: auto;
						// &.noselect-text{
						// 	-webkit-touch-callout: none;
						// 	-webkit-user-select: none;
						// 	-khtml-user-select: none;
						// 	-moz-user-select: none;
						// 	-ms-user-select: none;
						// 	user-select: none;
						// }
        }

        &:nth-child(2){
            border-top: 1px solid #e9eaec;
        }
        &:nth-child(4){
            border-bottom: 1px solid #e9eaec;
        }
        .@{prefix}-data-table{
            &.@{prefix}-content-table{

                left: 0;
                top: 0;
            }
            border-bottom: none;
            border-top: none;
            table-layout: fixed;
            tr{
                background: #fff;
                &.scroll-to-row-tip{
                    animation: scroll-tip .6s 3;
                }
                td{
                    min-width: 0;
                    height: 48px;
                    box-sizing: border-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                    border-bottom: 1px solid #e9eaec;
                    border-right: 1px solid #e9eaec;

                    border-left: 1px solid transparent;
                    border-top: 1px solid transparent;    // 表格选中
                    .@{prefix}-cell{
                        box-sizing: border-box;
                        padding: 0 18px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: break-all;
                    }
                    // &:last-child{
                    //     border-right: none;
                    // }
                    .edit-item-con{
                        width: 100%;
                        text-align: left;
                        padding: 0 6px;
                        box-sizing: border-box;
                        .edit-item{
                            &-input{
                                width: ~"calc(100% - 50px)";
                                float: left;
                            }
                            &-btn-con{
                                float: left;
                                .edit-btn{
                                    width: 20px;
                                    margin: 7px 4px 0 0;
                                }
                            }
                        }
                    }
                    &.start-select-cell{
                        border-left: 1px solid @select-border-color;
                        border-top: 1px solid @select-border-color;
                    }
                    &.end-select-cell{
                        border-right: 1px solid @select-border-color;
                        border-bottom: 1px solid @select-border-color;
                    }
                    &.right-top-select-cell{
                        border-right: 1px solid @select-border-color;
                        border-top: 1px solid @select-border-color;
                    }
                    &.left-bottom-select-cell{
                        border-left: 1px solid @select-border-color;
                        border-bottom: 1px solid @select-border-color;
                    }
                    &.top-center-select-cell{
                        border-top: 1px solid @select-border-color;
                    }
                    &.bottom-center-select-cell{
                        border-bottom: 1px solid @select-border-color;
                    }
                    &.left-center-select-cell{
                        border-left: 1px solid @select-border-color;
                    }
                    &.right-center-select-cell{
                        border-right: 1px solid @select-border-color;
                    }
                }
                &.stripe-gray{
                    background: #f8f8f9;
                }
                &.highlight-row{
                    background: #ebf7ff;
                }
            }
            &-left{
                text-align: left;
            }
            &-center{
                text-align: center;
            }
            &-right{
                text-align: right;
            }
        }
    }

    &-fixed{
        .@{prefix}-header-wrapper{
            top: 0;
            left: 0;
            box-sizing: border-box;
        }
    }

    &-fixed-table{
        position: -webkit-sticky;
        position: sticky;
				left: 0;
				z-index: 60;
        transition: box-shadow .2s ease;
        &.box-shadow{
            box-shadow: 2px 0 6px -2px rgba(0,0,0,.2);
            transition: box-shadow .2s ease;
        }
        td{
            border-right: 1px solid #e9eaec;
            // &:last-child{
            //     border-right: 1px solid #e9eaec !important;
            // }
        }
    }

    &-item-table{
        position: relative;
    }

		.sort-button{
			&-wrapper{
				display: inline-block;
				position: relative;
				width: 10px;
				height: 11px;
				transform: translateY(1px);
			}
			&-item{
				position: absolute;
				display: inline-block;
				width: 0;
				height: 0;
				border: 4px solid transparent;
				margin: 0;
				padding: 0;
				cursor: pointer;
				transition: border-color .2s ease;
				&-up{
					top: -4px;
					border-bottom: 4px solid #bbbec4;
					&:hover{
						border-bottom: 4px solid #495060;
					}
					&-active{
						border-bottom: 4px solid #2d8cf0;
					}
				}
				&-down{
					bottom: -4px;
					border-top: 4px solid #bbbec4;
					&:hover{
						border-top: 4px solid #495060;
					}
					&-active{
						border-top: 4px solid #2d8cf0;
					}
				}
			}
		}
}

